<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>模块管理</title>
		<!--引入layui的css  -->
		<link rel="stylesheet" href="../layui/css/layui.css" />
	</head>
	<!--引入Global.js  -->
	<!--引入layui的js  -->
	<script type="text/javascript" src="../layui/layui.js"></script>
	<!--引入jquery的js  -->
	<script type="text/javascript" src="../js/jquery.min.js"></script>
	<script type="text/javascript" src="../js/global.js"></script>
	<script type="text/javascript" src="../layui/treeTable.js"></script>
	<body>
		<div class="layui-fluid">
			<div class="layui-row layui-col-space15">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-body ">
							<input class="layui-input Modules/find" id="edtSearch" value="" placeholder="输入关键字"
								style="display: inline-block;width: 140px;height: 30px;line-height: 30px;padding: 0 5px;margin-right: 5px;" />
							<div class="layui-btn-container" style="display: inline-block;">
								<button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
									<i class="layui-icon">&#xe615;</i>搜索
								</button>
								<button id="btnClearSearch"
									class="layui-btn layui-btn-sm layui-btn-primary Modules/find">
									<i class="layui-icon">&#x1006;</i>清除搜索
								</button>
								<div class="layui-inline layui-show-xs-block Modules/add">
									<button id="addOneModel" style="display: ;"
										class="layui-btn layui-btn-sm layui-btn-primary Modules/add">
										<i class="layui-icon">&#xe654;</i>添加一级模块
									</button>
								</div>
							</div>
							<div class="page-wrapper Modules/find">
								<table id="demoTreeTable1"></table>
							</div>

						</div>
					</div>
				</div>
			</div>
		</div>

		<!--新增节点/修改节点  -->
		<div class="layui-card-body" style="display: none;" id="addEditModulesNone">
			<div class="layui-row" id="ModulesX">
				<form class="layui-form layui-col-space5" onsubmit="return false" id="ModulesFrom"
					lay-filter="ModulesFrom" name="ModulesFrom">
					<div class="layui-form-item" style="display: none">
						<label for="watchCatId" class="layui-form-label">模块编号</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" type="text" value="0" id="id" name="id" placeholder="模块编号"
								autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label for="watchCatId" class="layui-form-label">父模块</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" style="display: none;" readonly="readonly" type="text" value=""
								id="parentid" name="parentid" placeholder="父模块id" autocomplete="off"
								class="layui-input">
							<input size="28" readonly="readonly" type="text" value="" id="parentname" name="parentname"
								placeholder="父模块名称" autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label class="layui-form-label">模块名称</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" type="text" lay-verify="" id="name" name="name" placeholder="模块名称"
								autocomplete="off" class="layui-input">
						</div>
					</div>

					<div class="layui-form-item">
						<label for="watchCatId" class="layui-form-label">模块路径</label>
						<div class="layui-inline layui-show-xs-block">
							<input size="28" type="text" value="" id="path" name="path" placeholder="模块路径"
								autocomplete="off" class="layui-input">
						</div>
					</div>

					<div align="center" class="layui-form-item">
						<div class="layui-inline layui-show-xs-block">
							<button class="layui-btn" data-type="reload" lay-submit="tijiao" lay-filter="tijiao"
								id="tijiao">提交</button>
						</div>
					</div>
				</form>
			</div>
		</div>

		<!--定义数据表格table  -->
		<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

		<!-- 表格操作列 -->
		<script type="text/html" id="demoTreeTableBar1">
			<a class="layui-btn layui-btn-primary layui-btn-xs Modules/add" style="display: ;" lay-event="add">添加子节点</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs Modules/updata" style="display: ;" lay-event="edit">修改</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs Modules/delete" style="display: ;" lay-event="del">删除</a>
		</script>

	</body>
</html>

<script type="text/javascript">
	layui.config({
		base: '../'
	}).extend({
		treeTable: 'treeTable/treeTable'
	}).use(['layer', 'util', 'treeTable', 'form', 'table'], function() {
		var $ = layui.jquery;
		var layer = layui.layer;
		var util = layui.util;
		var treeTable = layui.treeTable;
		var form = layui.form;
		var table = layui.table;
		var tabledata = null;
		// 渲染表格

		var insTb = treeTable.render({
			elem: '#demoTreeTable1',
			data: tabledata,
			even: 'true',
			tree: {
				iconIndex: 1, // 折叠图标显示在第几列
				idName: 'id', // 自定义id字段的名称
				pidName: 'parentid', // 自定义标识是否还有子节点的字段名称
				isPidData: true // 是否是pid形式数据
			},
			cols: [{
					field: 'id',
					title: '模块编号',
					width: '10%',
					singleLine: true,
					align: 'center'
				},
				{
					field: 'name',
					title: '模块名称',
					width: '10%'
				},
				{
					field: 'path',
					title: '模块路径',
					width: '10%',
					align: 'center'
				},
				{
					align: 'center',
					toolbar: '#demoTreeTableBar1',
					title: '操作',
					width: '10%',
					align: 'center'
				}
			],
			reqData: function(data, callback) {
				// 在这里写ajax请求，通过callback方法回调数据
				$.ajax({
					url: "" + globalData.server +
					"modules/selectAllModule", //GetSysRightsJsonLayUI
					type: 'post',
					data: {
						'token': globalData.token
					},
					success: function(res) {
						callback(res);
						//return tabledata = res;
					}
				});
			}
		});

		//搜索
		$('#btnSearch').click(function() {
			var keywords = $('#edtSearch').val();
			if (keywords) {
				insTb.filterData(keywords);
			} else {
				insTb.clearFilter();
			}
		});

		//清除搜索
		$('#btnClearSearch').click(function() {
			insTb.clearFilter();
		});
		$('#addOneModel').click(function() {
			$("#parentid").val(0);
			$("#parentname").val("一级模块");
			edit_index = layer.open({
				type: 1,
				title: '您正在添加一级模块',
				content: $("#addEditModulesNone"),
				area: ['450px', '400px'],
				end: function() {
					$("#ModulesX input").val("");
					$("#name").val("");
					insTb.reload("#demoTreeTable1");
				}
			});
		});


		//增加子节点、修改和删除
		treeTable.on('tool(demoTreeTable1)', function(obj) {
			var event = obj.event;
			var data = obj.data;
			console.log(obj.data);
			if (event == 'del') {
				if (obj.data.children != null) {
					var children = data.children;
					var edit_index = layer.open({
						content: '该节点拥有子节点，无法删除',
						btn: ['确定', '取消'],
						yes: function(index, layero) {
							layer.close(edit_index);
						}
					});
				} else {
					if (confirm("您确定删除吗?")) {
						$.ajax({
							url: "" + globalData.server + "modules/DeleteModule",
							type: 'post',
							data: {
								"id": data.id,
								"token": globalData.token
							},
							dataType: "json",
							success: function(res) {
								layer.msg('删除成功', {
									icon: 1
								});
								insTb.reload("#demoTreeTable1");
							}
						});
					}
				}
			} else if (event == 'edit') {
				$("#parentname").val("无法修改父模块");
				$("#id").val(data.id);
				$("#parentid").val(data.parentid);
				$("#name").val(data.name);
				$("#path").val(data.path);
				edit_index = layer.open({
					type: 1,
					title: '您正在修改【' + data.name + '】模块',
					content: $("#addEditModulesNone"),
					area: ['500px', '400px'],
					end: function() {
						$("#ModulesX input").val("");
						$("#name").val("");
						$("#path").val("");
						insTb.reload("#demoTreeTable1");
					}
				});
			} else if (event == 'add') {
				$("#id").val("0");
				$("#parentid").val(data.id);
				$("#parentname").val(data.name);
				edit_index = layer.open({
					type: 1,
					title: '您正在添加为【' + data.name + '】子模块',
					content: $("#addEditModulesNone"),
					area: ['450px', '400px'],
					end: function() { //当关闭弹层调用
						$("#ModulesX input").val("");
						$("#name").val("");
						$("#path").val("");
						insTb.reload("#demoTreeTable1");
					}
				});

			}
		});


		//新增弹层的提交按钮
		form.on('submit(tijiao)', function(data) {
			var str = $("#ModulesFrom").serialize() + "&token=" + globalData.token;
			var id = $('#id').val()
			if (id == 0) {
				$.ajax({
					type: 'post', //提交方式get或post
					url: "" + globalData.server + "modules/CreateModule", //提交路径
					data: str, //参数
					dataType: 'json',
					success: function(res) { //提交成功
						layer.closeAll(); //关闭弹层
						layer.alert("添加成功！！！"); //提示信息
						table.reload('proTable'); // 修改后要刷新表格
					},
					error: function() { //提交失败
						alert("系统异常！！")
					}
				});
			} else {
				$.ajax({
					type: 'post', //提交方式get或post
					url: "" + globalData.server + "modules/UpdateModule", //提交路径
					data: str, //参数
					dataType: 'json',
					success: function(res) { //提交成功
						layer.closeAll(); //关闭弹层
						layer.alert("添加成功！！！"); //提示信息
						table.reload('proTable'); // 修改后要刷新表格
					},
					error: function() { //提交失败
						alert("系统异常！！")
					}
				});
			}
			return false;
		});

	});
</script>
